@use "@/uni.scss" as uni;

.page {
    // width: 100vw;
    // padding: 0 20rpx env(safe-area-inset-bottom);
    // box-sizing: border-box;
    // border: solid 1rpx transparent;
    // overflow: hidden;

    padding: unset;
    height: 100vh; // 确保页面容器有明确高度
    display: flex;
    flex-direction: column;

    .scroll-view {
        width: 100%;
        flex: 1; // 使用 flex 占据剩余空间
        min-height: 0; // 防止 flex 项目无限扩张
        padding-bottom: 30rpx;

        :deep(.com-banner),
        :deep(.com-notice),
        :deep(.com-title),
        :deep(.list-type) {
            width: calc(100% - uni.$padding-LR * 2);
        }

        .banner {
            width: 100%;
            margin: 15rpx auto 30rpx;
        }

        .notice {
            margin: 30rpx auto;
        }

        .feature-card {
            width: calc(100% - uni.$padding-LR * 2);
            margin: 30rpx auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30rpx;

            .card-item {
                height: 160rpx;
                // overflow: hidden;
                // border-radius: 20rpx;
                // background: radial-gradient(50rpx 50rpx at 65% 30%, #ffd1df, transparent);
                display: flex;
                position: relative;

                .left {
                    width: 65%;
                    height: 100%;
                    // background: #ffd1df;
                    border-radius: 20rpx;
                    border-bottom-right-radius: 0;
                    padding: 0 0 0 15rpx;
                    box-sizing: border-box;

                    .title {
                        font-size: 36rpx;
                        font-weight: 600;
                        line-height: 70rpx;
                    }

                    .content {
                        font-size: 28rpx;
                        line-height: 30rpx;
                        margin-bottom: 10rpx;
                    }

                    .title,
                    .content {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .right {
                    width: 35%;
                    height: 100%;

                    .top {
                        width: 100%;
                        height: 35%;
                        border-radius: 20rpx;
                        background: #fff;
                    }

                    .bottom {
                        width: 100%;
                        height: 65%;
                        // background: #ffd1df;
                        border-top-right-radius: 20rpx;
                        border-bottom-right-radius: 20rpx;
                    }
                }

                .bg-image {
                    position: absolute;
                    right: 0;
                    width: 40%;
                    height: 100%;

                    .image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .recommend {
            width: 100%;
            margin: 30rpx auto;

            .date {
                color: #ffab96;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            :deep(.com-empty) {
                padding: 0;
                height: unset;
            }

            .scroll-view {
                // width: 102.5%;
                // margin-left: 2.5%;
                width: 100%;
                margin-left: 20rpx;
                white-space: nowrap; // 设置子元素不换行

                .item {
                    width: 200rpx;
                    height: 430rpx;
                    margin-right: 15rpx;
                    border-radius: 15rpx;
                    overflow: hidden;
                    display: inline-block; // 设置为行内块元素

                    .image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .item:last-child {
                    margin-right: calc(2.5vw + 20rpx);
                }
            }
        }

        .selected {
            width: 100%;
            margin: 30rpx auto;

            .head-more {
                color: #545353;
            }

            .content {
                // width: 100%;
                // background-color: red;
                :deep(.com-empty) {
                    padding: 0;
                    height: unset;
                }
            }
        }

        .special-feature {
            width: 100%;
            margin: 30rpx auto;

            .scroll-view {
                // width: 102.5%;
                width: 100%;
                margin-left: uni.$padding-LR;
                // margin-left: 2.5%;
                white-space: nowrap; // 设置子元素不换行

                .item {
                    width: 500rpx;
                    height: auto;
                    margin-right: 15rpx;
                    display: inline-block; // 设置为行内块元素

                    .card {
                        width: 100%;
                        height: auto;
                        border-radius: 15rpx;
                        overflow: hidden;
                        box-sizing: border-box;
                        border: 1rpx solid #e3e2e2;

                        .pic-list {
                            width: 100%;
                            height: 300rpx;
                            overflow: hidden;
                            background-color: #fff;

                            .group {
                                width: 100%;
                                height: 100%;
                                display: grid;
                                grid-template-columns: repeat(3, 1fr);
                                gap: 6rpx;

                                transform: translate(-50%, -70%) rotate(33deg) scale(1.5);
                                position: relative;
                                top: 50%;
                                left: 50%;

                                .pic {
                                    order: 0;

                                    .image {
                                        width: 100%;
                                        height: 450rpx;
                                    }
                                }

                                .pic:nth-child(2) {
                                    order: -1;
                                }
                            }
                        }

                        .footer {
                            width: 100%;
                            padding: 20rpx 20rpx 30rpx;
                            box-sizing: border-box;

                            .title {
                                font-size: 38rpx;
                                font-weight: 500;
                                margin-bottom: 10rpx;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                            .content {
                                display: flex;
                                justify-content: space-between;

                                .like-num,
                                .image-num {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    font-size: 28rpx;
                                    color: #ccc;
                                }
                            }
                        }
                    }
                }

                .item:last-child {
                    margin-right: calc(2.5vw + 20rpx);
                }

                .line1,
                .line2 {
                    height: 12rpx;
                    margin: auto;
                    border-radius: 12rpx;
                }

                .line1 {
                    width: 90%;
                    background-color: #e3e2e2;
                }

                .line2 {
                    width: 70%;
                    background-color: #ebeaea;
                }
            }

            :deep(.com-empty) {
                padding: 0;
                height: unset;
            }
        }
    }
}
